<!-- 标签管理 -->
<template>
  <div class="row" v-loading="isOp">
    <div class="col-12 mb-20" style="float:left">
      <el-dialog title="真的要删除该标签吗？" :visible.sync="tagDelete">
        <el-form :model="currentTag">
          <el-form-item :label="'您有'+currentTag.userid+'篇文章使用了 “'+currentTag.name+'” 您可以在这里修改它'"
            >
            <el-input v-model="currentTag.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deleteTag()" :loading="isDelete">坚持删除</el-button>
          <el-button type="primary" @click="edit()" :loading="isEdit">修改</el-button>
        </div>
      </el-dialog>
      <el-badge :value="item.userid" :max="99" class="mt-10 mr-10" v-for="(item,i) in tags" :key="item.id"
        :hidden="item.userid == 0">
        <el-tag :type="getType(i)" class="ml-10" effect="plain" closable @close="handleClose(item)">
          {{ item.name }}
        </el-tag>
      </el-badge>
      <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
        @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新的标签</el-button>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import draggable from 'vuedraggable'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      draggable
    },
    data() {
      //这里存放数据
      return {
        isDelete: false,
        isEdit: false,
        isOp:false,
        currentTag: {},
        tagDelete: false,
        tags: [],
        types: ['', 'succes', 'info', 'danget', 'waring'],
        inputVisible: false,
        inputValue: '',
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      async getTags() {
        this.isOp = true;
        var res = await this.$api.core.getTagsCount();
        this.tags = res.data;
        this.isOp = false;
      },
      getType(idx) {
        return this.types[idx % this.types.length];
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      async handleInputConfirm() {
        this.isOp = true;
        let inputValue = {
          name: this.inputValue
        };
        if (inputValue.name) {
          var res = await this.$api.core.add(inputValue);
          if (res.code == '6000')
            this.getTags();
        }
        this.inputVisible = false;
        this.inputValue = '';
        this.isOp = false;
      },
      async deleteTag() {
        this.isOp = true;
        this.isDelete = true;
        // 删除
        const pram = {
          id: this.currentTag.id
        }
        var res = await this.$api.core.delete(pram);
        if (res.code == '6000')
          this.getTags();
        this.tagDelete = false;
        this.isDelete = false;;
        this.isOp = false;
      },
      async edit() {
        this.isEdit = true;
        // 修改
        const pram = {
          id:this.currentTag.id,
          name:this.currentTag.name
        }
        var res = await this.$api.core.update(pram)
        if (res.code == '6000')
          this.getTags();
        this.tagDelete = false;
        this.isEdit = false;
      },
      async handleClose(item) {
        this.isOp = true;
        this.currentTag = item;
        if (item.userid > 0) {
          this.tagDelete = true;
        } else {
          // 删除
          const pram = {
          id: this.currentTag.id
        }
          var res = await this.$api.core.delete(pram);
          if (res.code == '6000')
            this.getTags();
        }
        this.isOp = false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getTags();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
